<template>
  <div
    :class="[
      'component-pc-course__card',
      'classify-item',
      kl_md.KLGL == 1 ? 'gelin-card' : null
    ]"
    @click="toPath(detail.id)"
  >
    <div class="course-img">
      <img class="icon_path" v-lazy="detail.iconPath" :key="detail.iconPath" alt="" />
      <div
        class="member-price"
        v-if="
          kl_md.KLHY == 1 && !detail.isFree && !detail.isDiscount && is_member
        "
      >
        <span v-if="isMemberFree">会员免费</span>
        <span v-else>
          <span style="font-size: 12px;">会员价</span>
          <span
            style="margin-left:10px;"
            v-if="user_member && user_member.memberLevel === 0"
            >￥{{ detail.smallMemberPrice.toFixed(2) }}</span
          >
          <span
            style="margin-left:10px;"
            v-if="user_member && user_member.memberLevel === 1"
            >￥{{ detail.middleMemberPrice.toFixed(2) }}</span
          >
          <span
            style="margin-left:10px;"
            v-if="user_member && user_member.memberLevel === 2"
            >￥{{ detail.highMemberPrice.toFixed(2) }}</span
          >
        </span>
      </div>
    </div>
    <div class="course-msg">
      <div class="course-title">
        {{ detail.courseName }}
      </div>
      <div class="tabs-price">
        <div class="tabs">
          <template
            v-if="
              detail.label &&
                JSON.parse(detail.label) &&
                JSON.parse(detail.label).length > 0
            "
          >
            <span
              style="margin-right:8px;"
              v-for="(item, index) in JSON.parse(detail.label)"
              :key="index"
              >#{{ item }}</span
            >
          </template>
          <!-- <span>#五星级</span>
          <span>#五星级</span> -->
        </div>
        <!-- 非折扣 -->
        <div class="price" v-if="!detail.isDiscount">
          <span v-if="detail.isFree == 0">￥{{ detail.price }}</span>
          <span style="font-style:normal;" v-if="detail.isFree == 1">免费</span>
        </div>
        <!-- 折扣 -->
        <div class="price" v-if="detail.isDiscount">
          <span class="old-price" v-if="detail.isFree == 0"
            >￥{{ detail.price }}</span
          >

          <span v-if="detail.isFree == 0"
            ><span style="font-size: 14px;font-style: italic;font-weight: 500;"
              >￥</span
            >{{ detail.discountPrice }}</span
          >
          <span style="font-style:normal;" v-if="detail.isFree == 1">免费</span>
        </div>
      </div>
      <div class="course-number">
        <div class="left-hot">
          <img src="/img/pc/hot.png" alt="" />
        </div>
        <div class="right-buy-number">{{ detail.studentSum || 0 }}人已购买</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  props: ["detail", "major", "memberDiscount", "user_member", "is_member"],
  components: {},
  data() {
    return {};
  },
  computed: {
    ...mapState({
      is_ios(state) {
        return state.is_ios;
      },
      is_in_wechat(state) {
        return state.is_in_wechat;
      },
      member_discount(state) {
        return state.member_discount;
      },
      is_hidden_content(state) {
        return state.is_hidden_content;
      },
      kl_md(state) {
        return state.kl_md;
      }
    }),

    isMemberFree() {
      // console.log("member_discount",this.memberDiscount)
      if (this.memberDiscount && JSON.stringify(this.memberDiscount) !== "{}") {
        if (
          this.memberDiscount.majorIds.includes(this.detail.majorId) ||
          this.memberDiscount.courseIds.includes(this.detail.id)
        ) {
          return true;
        } else {
          return false;
        }
      }
    }
  },
  watch: {},
  methods: {
    toPath(id) {
      this.$router.push({
        path: "/coursedetail",
        query: {
          id
        }
      });
    }
  },
  created() {
    // console.log("memberDiscount",this.memberDiscount)
    // console.log("user_member",this.user_member)
    // console.log("is_member",this.is_member)
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
.component-pc-course__card {
}
.classify-item {
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-sizing: content-box;
  width: 278px;
  height: 292px;
  background-color: #ffffff;
  border-radius: 4px;
  margin-bottom: 36px;
  margin-left: 11px;
  margin-right: 11px;
  .course-img {
    width: 100%;
    height: 183px;
    position: relative;
    img {
      width: 100%;
      height: 100%;
      display: block;
    }
    .member-price {
      position: absolute;
      left: 0;
      bottom: 0;
      // width: 113px;
      padding: 0 30px 0 20px;
      line-height: 27px;
      font-size: 14px;
      color: #ffffff;
      height: 27px;
      background-image: linear-gradient(
          -45deg,
          #e3b772 0%,
          #f1c989 55%,
          #ffdaa0 100%
        ),
        linear-gradient(#ffffff, #ffffff);
      // border-radius: 0px 12px 0px 0px;
      // clip-path: polygon(27px 0,100% 0,100% 100%,0 100%,0 27px);
      clip-path: polygon(88% 0, 100% 100%, 0 100%, 0 0);
    }
  }
  .course-msg {
    padding: 20px;
    box-sizing: border-box;
    .course-title {
      color: #3a3d42;
      font-weight: 700;
      font-size: 16px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .tabs-price {
      display: flex;
      justify-content: space-between;
      align-items: center;
      line-height: 2;
      .tabs {
        font-size: 14px;
        color: #a3a9b2;
      }
      .price {
        color: #ff7f57;
        font-size: 20px;
        font-style: italic;
        font-weight: 700;
        .old-price {
          font-size: 14px;
          text-decoration: line-through;
          color: #919499;
          font-weight: 500;
          font-style: italic;
        }
      }
    }
    .course-number {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left-hot {
      }
      .right-buy-number {
        font-size: 12px;
        color: #b7bdc7;
      }
    }
  }
}
.gelin-card {
  height: auto;
  .course-img {
    height: 409px;
  }
}
</style>
<style lang="scss">
.component-pc-course__card {
  .ivu-tag {
    display: block;
    margin: 0;
    opacity: 0.8;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
  }
  .ivu-tag + .ivu-tag {
    margin-top: 12px;
  }
}
</style>
